import React from "react";
import voterCardStyle from "./VoterCard.module.css";
import Style from "../Card/Card.module.css"
import { Voter } from "../../context/Voter";

interface VoterCardProps {
    voterArray: Voter[];

}

const VoterCard: React.FC<VoterCardProps> = ({ voterArray }) => {
    return (
        <div className={Style.card}>
            {voterArray?.map((el: Voter, index: number) => {
                // 确保el及其属性不为undefind
                const safeEL = el as Required<Voter>;
                return (
                    <div className={Style.card_box} key={index}>
                        <div className={Style.image}>
                            <img
                                src={safeEL.image}
                                alt="Profile photo"
                            />
                        </div>

                        <div className={Style.card_info}>
                            <h2>{safeEL.name}#{safeEL.voterID}</h2>
                            <p>Address: {safeEL.address.slice(0, 20)}..</p>
                            <p>
                                Over the years, I have acquired relevant skills and experience.
                            </p>
                            <p className={voterCardStyle.vote_Status}>
                                {safeEL.votingStatus == true ? "You Already Voted" : "Not Voted"}
                            </p>
                        </div>

                    </div>
                )

            })}
        </div>
    )
}

export default VoterCard;